<template>
	<view class="myOrderBox">
            <view class="artItem bgWhite plr18 ptb13  radius6    " v-for="(i,n) in list" :key="n">
                <view class=" justify-between  ">
                    <text class="name">{{i.type}}</text>
					<text class="number" :style="i.ext=='+'?'':'color:#DFC199'">￥{{i.wallet}}</text>
                </view>
				<view class="justify-between mt12">
					<text>{{i.memo}}</text>
					<text class="desc ">{{i.time}}</text>
				</view>
				<view class="" v-if="i.pay_img" @click="showImg(i)" style="color: #49806F;">
					查看凭证
				</view>
		</view>
        <view class="" v-if="list.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
	
	</view>
</template>

<script>
	export default {
	data() {
		return {
			page:1,
			list:[],
			total:0
	
		};
	},
	onLoad() {
		this.page=1
		this.list = []
		this.getlist()
	},
	onReachBottom() {
		if(this.list.length<this.total){
			this.page++
			this.getlist()
		}
	
	},
		
	methods: {
			
		showImg(i){
			uni.previewImage({
				urls:[i.pay_img]
			})
		},
	    formateTime(data){
	      return this.$utils.formatDateTime(data)  
	    },
		getlist(){
			uni.showLoading({
				title:'加载中'
			})
			this.$api.wallet({page:this.page}).then(res=>{
				console.log(res)	
				if(res.code==1){
					this.total = res.data.total
					this.list = [...this.list,...res.data.rows]
				}
				
			})
		}
	}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox {
		
		position: relative;
		

		.orderTitle {
			width: 750rpx;
			height: 98rpx;
			// background-color: #FFFFFF;
			display: flex;
			font-size: 26rpx;
			color: #666666;
            border-bottom: 2rpx solid  rgba(151,151,151,0.062);
			.titleItem {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				font-weight: 600;
			}

			.active {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				color: #000000;
				position: relative;
				font-weight: 600;
			}

			.active::after {
				position: absolute;
				content: "";
				width: 74rpx;
				height: 4rpx;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				background: #2CC6A1;
			}
		}

	}	
    .submitPz{
        width: 165rpx;
        height: 54rpx;
        background: #434343;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
    }
    .artItem {
        
        font-size: 28rpx;
        color: #999999;
        width: 706rpx;
        // height: 150rpx;
        margin: 20rpx auto 0;
        
    
        .name{
            font-size: 32rpx;
            color: #333;
			font-weight: bold;
        }	
		.number{
			font-size: 32rpx;
			color: #49806F;
			font-weight: bold;
		}
		
		
    }
	.mt16{
		margin-top: 32rpx;
	}
</style>